import React from 'react'

import { add } from './redux/actions'
import { useSelector, useDispatch } from 'react-redux'

export default function Demo() {
  console.log('demo组件更新了')
  // useSelector的作用: 1. 当redux数据发生变化,让当前组件更新 2. 会自动判断当前组件使用的数据是否变化,当前组件使用的数据变化才更新,否则不更新(提高性能) 3. 会将当前组件需要的数据返回出来,我们使用的使用更方便
  const count = useSelector((state) => {
    return state.zs.count
  })
  // 返回store.dispatch函数
  const dispatch = useDispatch()
  return (
    <div>
      <p>{count}</p>
      <button
        onClick={() => {
          dispatch(add(9))
        }}
      >
        +
      </button>
    </div>
  )
}
